window.onload=function(){
	var box =document.getElementById("box");
		var minleft=document.getElementById("minleft");
		var minright =document.getElementById("minright");
		var bigbox =document.getElementById("bigbox");
		var minbox =document.getElementById("minbox_ner");
		var bigimg=document.getElementById("bigimg");
		var fd = document.getElementById("fd");
		var mbox = document.getElementById("minbox");
		var nerr=document.getElementById("nerr")
		var num = 0;			
		 var minboxner = minbox.children;
		 box.addEventListener("mouseover",function(){
		 fd.style.display="block";
			bigbox.style.display="block";
			fdwidth = box.offsetWidth*bigbox.offsetWidth/bigimg.offsetWidth;
			fdheight = box.offsetHeight*bigbox.offsetHeight/bigimg.offsetHeight;
			bigfdtop = bigbox.offsetHeight/fdheight;
			bigfdleft = bigbox.offsetWidth/fdwidth;
			fd.style.width=fdwidth+"px";
			fd.style.height=fdheight+"px";	
			clearInterval(t);
		 })
		
		box.addEventListener("mousemove",function(ele){	
			var e = ele||event;			
			var fdleft = e.clientX-box.offsetLeft-fd.offsetWidth/2-nerr.offsetLeft;
			var fdtop = e.clientY-box.offsetTop-nerr.offsetTop-fd.offsetHeight/2;
			fdleft = Math.min(Math.max(0,fdleft),box.offsetWidth-fd.offsetWidth);
			fdtop = Math.min(Math.max(0,fdtop),box.offsetHeight-fd.offsetHeight);
			fd.style.left=fdleft+"px";
			fd.style.top=fdtop+"px";
			bigimg.style.left=-fdleft*bigfdleft+"px";
			bigimg.style.top=-fdtop*bigfdtop+"px";	
		})
		box.addEventListener("mouseout",function(){
			fd.style.display="none";
			bigbox.style.display="none";
		})
		function lunbo(){					
			num++;
			if(num>=5){
					minbox.style.left=-150+"px";
					num=1;
			}
			animate(minbox,{left:-150*num},				
			box.style.background="url\(imag\/00"+num+".jpg\)",
			box.style.backgroundSize="100% 100%",
			bigimg.src="imag\/00"+num+".jpg" 
			);	
			
		}
			t = setInterval(lunbo,2000)
		mbox.onmouseover=function(){
			clearInterval(t);
		}
		box.onmouseover=function(){
			clearInterval(t);
			
		}
		mbox.onmouseout=function(){
			t = setInterval(lunbo,2000)
		}
		box.onmouseout=function(){
			t = setInterval(lunbo,2000)
		}
		minleft.onclick=function(){
			num++
			if(num>=5){
					minbox.style.left=-150+"px";
					num=1;
				}
			console.log(num);
			animate(minbox,{left:-150*num},
			box.style.background="url\(imag\/00"+num+".jpg\)",
			box.style.backgroundSize="100% 100%",
			bigimg.src="imag\/00"+num+".jpg"
			)
		}
		minright.onclick=function(){
			num--;	
			console.log(num)
			if(num <= 0){
				num = 4 ;
				minbox.style.left=-1620+"px";					
			}
			console.log(num)
			animate(minbox,{left:-150*num},				
			box.style.background="url\(imag\/00"+num+".jpg\)",
			box.style.backgroundSize="100% 100%",
			bigimg.src="imag\/00"+num+".jpg"
			);			
		}
}
